<template>
	<view>
		<view class="tophead uibghui">
			<view class="avatar"><u-avatar 
			src="../../static/avatar.jpg" 
			randomBgColor
			size="58"
			></u-avatar></view>
			<view class="userinfo">
				<view class="htop">
					<view class="userid">IDF5454654</view>
					<view class="uservip">
						<text class="vipicon">&#xe83d;</text>
						未开通会员</view>
				</view>
				<view>
					<text style="color: #c0b06d;font-size: 12px;padding-right: 3px;">初学弟子</text>
					<text style="color: antiquewhite;font-size: 12px;">已研究0个八字</text>
				</view>
			</view>
			<view class="righticon"><u-icon name="arrow-right" color="white"></u-icon></view>
		</view>
		<view class="member">
		<view class="membertext">
			<u--image :showLoading="true" src="../../static/viplogo.png" width="20px" height="20px"></u--image>
			<view style="display: flex;flex-direction: column;"><text>问道VIP会员</text>
		<text style="font-size: 12px;">成为问道VIP享受15项权益</text></view>
			
		</view>
		<view class="openmember" @click="openmember">会员权益</view>
		</view>
		<view class="mainblock">
			<!-- <view style="font-size: 16px;font-weight: bold;padding: 10px;">显示设置</view> -->
			<view class="mainblockbody">
			<view class="mitem" >
				<text class="micon">&#xe8a1;</text>
				<text class="mtitle">新手指南</text>
			</view>
			</view>
		</view>
		<view class="mainblock">
			<view style="font-size: 16px;font-weight: bold;padding:  10px 10px 20px 10px;">显示设置</view>
			<view class="mainblockbody">
			
			<view class="mitem" >
				<text class="micon">&#xe679;</text>
				<text class="mtitle">偏好设置</text>
			</view>
			<view class="mitem" >
				<text class="micon">&#xe609;</text>
				<text class="mtitle">基本排盘</text>
			</view>
			<view class="mitem" >
				<text class="micon">&#xe609;</text>
				<text class="mtitle">专业排盘</text>
			</view>
			</view>
		</view>
<!-- 		<view class="mainblock">
			<view style="font-size: 16px;font-weight: bold;padding: 10px;">规则设置</view>
			<view class="mainblockbody">
			
			<view class="mitem" v-for="(item,index) in 3" :key="index">
				<text class="micon">&#xe83d;</text>
				<text class="mtitle">新手指南</text>
			</view>
			</view>
		</view>
		<view class="mainblock">
			<view style="font-size: 16px;font-weight: bold;padding: 10px;">其他工具</view>
			<view class="mainblockbody">
			
			<view class="mitem" v-for="(item,index) in 3" :key="index">
				<text class="micon">&#xe83d;</text>
				<text class="mtitle">新手指南</text>
			</view>
			</view>
		</view> -->
		<view class="bottom">八字问道 版权所有 V1.0.0</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			openmember(){
				uni.navigateTo({
					url: 'member'
				});
			}
		}
	}
</script>

<style lang="scss">
	.myvipicon{
		margin-right: 4px;
		font-family: myfont;
	}
	.membertext{
		display: flex;
		flex-direction: row;
		
	}
	.micon{
		font-size: 26px;
		font-family: myfont;
		margin-bottom: 6px;
	}
	.mtitle{
		font-size: 14px;
	}
	.mitem{
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 0.25;
	}
	.bottom{
		padding-top: 20px;
		position: fixed;
		bottom: 10px;
		text-align: center;
		left: 0;
		right: 0;
		font-size: 13px;
		color: #aaaaaa;
	}
	.mainblockbody{
		display: flex;
		
	}
	.mainblock{
		background-color: white;
		margin: 15px;
		padding: 10px;
		border-radius: 10px;
		
	}
	.openmember{
		background: linear-gradient(to right, #85693f, #4d4729);
		color: white;
		padding: 6px 20px;
		font-size: 14px;
		font-weight: bold;
		border-radius: 30px;
	}
	.vipicon{
		font-family: myfont;
		font-size: 20px;
	}
	.uservip{
		background-color: #aaaaaa;
		color: white;
		font-size: 10px;
		padding: 1px 4px;
		border-radius: 4px;
		margin-left: 6px;
		display: flex;
		align-items: center;
	}
	.htop{
		padding-bottom: 5px;
		display: flex;
	}
	.userid{
		font-size: 18px;
		color: white;
		font-weight: bold;
	}
	.avatar{
		margin-right: 8px;
	}
	.userinfo{
		flex: 1;
	}
	page{
		background-color: #f8f8f8;
	}
	.tophead{
		//background-color: #26253d;
		height: 190px;
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
		display: flex;
		padding: 0 15px;
		align-items: center;
	}
	.member{
		display: flex;
		justify-content: space-between;
		align-items: center;
		//background-color: rgb(201 174 124);
		background: linear-gradient(to right, #e9d3b3, #beaf6a);
		margin: -30px 15px 0px 15px;
		padding: 10px;
		border-radius: 10px;
		height: 50px;
	}
</style>
